<template>
	<view class="container">
		<!-- 举报 -->
		<!-- 举报信息 -->
		<u--form :model="params" ref="uForm">
			<view class="line">
				<view class="text">举报信息</view>
				<u-line color="#2979ff"></u-line>
			</view>
			<view class="report-information">
				<!-- <u-form-item label="举报类型" prop="params.type">
					<uni-data-select v-model="params.type" :localdata="typeList"></uni-data-select>
				</u-form-item> -->
				<u-form-item label="举报对象" prop="reportReason">
					<u-input v-model="params.reportReason" placeholder="举报对象:单位,个人,网站名称(必填)"></u-input>
				</u-form-item>
				<u-form-item label="举报内容" prop="reportDescription">
					<u--textarea v-model="params.reportDescription" placeholder="举报内容(必填)" count
						maxlength="500"></u--textarea>
				</u-form-item>
				<u-form-item label="提示">
					<span style="color: red;">仅支持图片类格式文件，最多上传3个附件</span>
				</u-form-item>
				<u-form-item label="附件" prop="image">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="3"></u-upload>
				</u-form-item>
			</view>

			<!-- 举报人信息 -->
			<!-- <view class="line">
				<view class="text">举报人信息</view>
				<u-line color="#2979ff"></u-line>
			</view>
			<view class="people-information">
				<u-form-item label="真实姓名" prop="params.name">
					<u-input placeholder="真实姓名(必填)"></u-input>
				</u-form-item>
				<u-form-item label="联系电话" prop="params.phone">
					<u-input placeholder="联系电话(必填)"></u-input>
				</u-form-item>
				<u-form-item label="电子邮箱" prop="params.mailbox">
					<u-input placeholder="电子邮箱"></u-input>
				</u-form-item>
			</view> -->
		</u--form>
		<u-button class="submitStyle" text="提交" shape="circle" color="#FFB258" @click="submit"></u-button>
	</view>
</template>

<script>
	import {
		newReport
	} from '@/api/report/index.js'
	export default {
		data() {
			return {
				// 
				fileList1: [],
				// 图片暂存
				photoArray: [],
				/**
				 * reportReason:原因：举报对象*
				 * reportDescription:举报内容*
				 * reportDate:举报日期
				 * status:状态
				 * reporterName:举报人名称
				 * reporterPhone:举报人电话
				 * reporterEmail:举报人邮箱
				 * image:图片*
				 */
				params: {
					reportReason: '',
					reportDescription: '',
					image: ''
				},
				// 验证规则
				rules: {
					reportReason: [{
						required: true,
						message: '请填写举报对象',
						trigger: ['change', 'blur'],
					}],
					reportDescription: [{
						required: true,
						message: '请填写举报内容',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				// 表单验证
				let params = this.params;
				this.$refs.uForm.validate().then(res => {
					console.log('验证通过', params)
					newReport(params).then(res => {
						console.log('举报结果',res)
						uni.showModal({
							title: '提交成功！',
							showCancel: false,
							success: (res) => {
								console.log(res)
								if (res.confirm) {
									uni.navigateBack({
										delta:2
									})
								}
							}
						})
					})
				}).catch(res => {
					// console.log('验证失败')
				})

				// uni.navigateBack()
			},
			/**
			 * 图片上传
			 */
			async afterRead(event) {
				console.log('图片上传event', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log('fileList', this.fileList1)
			},
			// 删除图片
			deletePic(event) {
				console.log('删除图片', event)
				this[`fileList${event.name}`].splice(event.index, 1)
				this.photoArray.splice(event.index, 1)
				this.params.image = this.photoArray.join(',')
				console.log('deletePic', this.fileList1)
			},
			uploadFilePromise(url) {
				console.log('1231231', url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						// url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						// url: 'http://192.168.13.153:8080/village/together/upload',
						url: 'https://zhnc.pcippc.com/api/village/together/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log('res', res)
							let result = res.data
							this.photoArray.push(result)
							this.params.image = this.photoArray.join(',')
							console.log('result', this.params)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	::v-deep.container {
		padding: 0 20rpx;

		.u-form-item__body {
			.u-form-item__body__left {
				width: auto !important;
			}
		}

		.submitStyle {
			margin-top: 25rpx;
			width: 50%;
		}

	}

	.line {
		margin: 20rpx 0;

		>.text {
			margin-bottom: 20rpx;
		}
	}
</style>